<template>
  <div>
    <div>
      <a-row type="flex" align="middle" style="clear:both;">
        <h3 v-if="!option.isTable">{{indexFormat}}</h3>
        <a-button type="link" @click="addItem">添加子项</a-button>
        <a-checkbox
          v-if="!option.isTable"
          :checked="row.isAddable"
          style="color: #13c2c2"
          @change="onChange($event.target.checked, 'isAddable')">允许新增</a-checkbox>
        <a-checkbox
          v-if="row.isAddable"
          :checked="row.isColumn"
          style="color: #13c2c2"
          @change="onChange($event.target.checked, 'isColumn')">列展示</a-checkbox>
        <a-button v-if="!option.isTable" type="link" @click="removeRow">移除</a-button>
      </a-row>
    </div>
    <div :class="option.isTable ? 'tableFlex' : ''">
      <slot name="rowContent"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ['idx', 'row', 'option'],
  name: 'rowItem',
  computed: {
    indexFormat() {
      return `行 ${this.idx + 1}`;
    }
  },
  methods: {
    addItem() {
      this.$emit('addItem');
    },
    removeRow() {
      this.$emit('removeRow');
    },
    onChange(value, prop) {
      this.$emit('valueChanged', value, prop, this.row);
    }
  }
};
</script>
<style lang="less" scoped>
  .tableFlex {
    display: flex;
    flex-wrap: nowrap;
  }
</style>
